<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>资产统计</span>
      </div>
      <div class="asset-box">
        <span>账户总额: {{ accountInfo.total }} 元</span>
        <el-divider></el-divider>
        <div class="data-box">
          <!-- Echart图标容器 -->
          <div id="myEchart" class="echart-box"></div>
          <!-- 资产分类显示表格 -->
          <div class="data-table">
            <el-table
              :data="tableData"
              style="width: 100%"
              :show-header="false"
            >
              <el-table-column prop="name" width="280"> </el-table-column>
              <el-table-column prop="value" width="80"> </el-table-column>
              <el-table-column width="35">元</el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      myEchart: null,
      tableData: [
        {
          name: "可用余额",
          value: 999,
        },
        {
          name: "待收收益",
          value: 99,
        },
        {
          name: "待收本金",
          value: 9,
        },
        {
          name: "可用代金券",
          value: 999,
        },
      ],
    };
  },
  mounted() {
    // 设置表格数据
    this.setTableData();
    // 生成Echart图表
    this.drawMyEchart()
  },
  computed: {
    // 用户的资产数据
    ...mapGetters(["accountInfo"]),
  },
  methods: {
    // 设置资产数据到表格
    setTableData() {
      console.log("用户资产：", this.accountInfo);
      this.tableData[0].value = this.accountInfo.balance;
      this.tableData[1].value = this.accountInfo.interestTotal;
      this.tableData[2].value = this.accountInfo.inverstmentW;
      this.tableData[3].value = this.accountInfo.discount;
      // 生成Echart图表
      this.drawMyEchart()
    },
    // 生成Echart图表
    drawMyEchart() {
      this.myEchart = this.$echarts.init(document.getElementById("myEchart"));
      var option;

      option = {
        title: {
          text: "资产统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Area Mode",
            type: "pie",
            radius: [10, 120],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            data: this.tableData
          },
        ],
      };
      this.myEchart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .card-title{
    font-size: 25px;
  }
  .data-box {
    display: flex;
    // 平均的分布在里面
    justify-content: space-around;
    .echart-box {
      width: 400px;
      height: 400px;
    }
  }
}
</style>